<template>
    <div class="warehouse-add">
        <a-modal width="90%" :visible="visible" :title="modalOption.title" @ok="modalOption.onOk" @cancel="modalOption.onCancel"
            :okText="modalOption.okText" :cancelText="modalOption.cancelText" class="yuan-modal warehouse-add-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-box yuan-form-col3">
                            <a-form-model-item class="yuan-form-item" label="仓库名称" prop="name">
                                <a-input class="yuan-form-input" v-model="formData.name" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="仓库地址" prop="address">
                                <a-input class="yuan-form-input" v-model="formData.address" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item" label="仓储方式" prop="storageWay">
                                <a-input class="yuan-form-input" v-model="formData.storageWay" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="仓储条件" prop="storageStorage">
                                <a-input class="yuan-form-input" v-model="formData.storageStorage" placeholder="请输入"></a-input>
                            </a-form-model-item>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import nextApi, { WarehouseListRes } from "@/api/nextApi";
@Component({
    name: "Add",
    components: {},
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) infoDetail!: WarehouseListRes;
    @Watch("visible")
    visibleChange() {
        if (this.visible) this.formData = { ...this.infoDetail };
        this.modalOption.title = this.infoDetail.id ? "编辑仓库" : "新增仓库";
    }
    formLoading = false;
    modalOption = {
        title: "新增仓库",
        okText: "保存",
        cancelText: "取消",
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };
    rules = {
        name: [{ required: true, message: "请输入仓库名称", trigger: "blur" }],
        address: [{ required: true, message: "请输入仓库地址", trigger: "blur" }],
    };
    formData: any = {};
    resetForm() {
        this.formData = {};
    }
    async mounted() {}
    closeModal() {
        this.resetForm();
        (this.$refs.form as any).resetFields();
        this.$emit("closeModal");
    }
    modalOk() {
        (this.$refs.form as any).validate(async (valid: any) => {
            if (valid) {
                this.formLoading = true;
                try {
                    if (this.infoDetail && this.infoDetail.id) {
                        //
                    } else {
                        this.formData.id = "";
                        this.formData.state = 1;
                    }

                    const res = await nextApi.setWarehouseState(this.formData);
                    this.$message.success(res.msg);
                    this.closeModal()
                    this.$emit("resetList");
                } finally {
                    this.formLoading = false;
                }
            }
        });
    }
}
</script>
<style lang="scss">
.warehouse-add-modal {
}
</style>
